@progress/wct-a11y-spec/dist/design-system/AI Prompt.json

Contains accessibility and keyboard navigation specification of Telerik and Kendo web components.

[
    {
        "h2": "Accessibility Support"
    },
    {
        "p": "Out of the box, the Telerik and Kendo UI AI Prompt provides extensive accessibility support and enables users with disabilities to acquire complete control over its features."
    },
    {
        "p": "The AI Prompt is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 standards](https://www.w3.org/TR/WCAG22/) and [Section 508](http://www.section508.gov/) requirements, follows the [Web Accessibility Initiative - Accessible Rich Internet Applications (WAI-ARIA)](https://www.w3.org/WAI/ARIA/apg/) best practices for implementing the [keyboard navigation](#keyboard-navigation) for its `component` role, provides options for [managing its focus](#managing-the-focus) and is tested against the most popular [screen readers](#screen-readers)."
    },
    {
        "h3": "WAI-ARIA"
    },
    {
        "p": "This section lists the selectors, attributes, and behavior patterns supported by the component and its composite elements, if any."
    },
    {
        "h4": "AI Prompt"
    },
    {
        "p": "The AI Prompt component is a composite one and integrates the accessibility of the Toolbar, TextArea, Card List container"
    },
    {
        "h4": "TextArea Component"
    },
    {
        "link": {
            "title": "TextArea accessibility specification",
            "source": "{{textarea_a11y_link}}"
        }
    },
    {
        "h4": "Prompt Suggestion Component"
    },
    {
        "p": "The Prompt suggestion list implements roving tabindex navigation. Meaning that only one suggestion has tabindex=0. The display of the suggestion list is controlled by the expand button."
    },
    {
        "table": {
            "headers": [
                "Selector",
                "Attribute",
                "Usage"
            ],
            "rows": [
                {
                    "Selector": "`.k-prompt-expander .k-button`",
                    "Attribute": "`aria-controls=.k-prompt-expander-content id`",
                    "Usage": "Points to the controlled element based on the given `id`."
                },
                {
                    "Selector": "",
                    "Attribute": "`aria-expanded=true/false`",
                    "Usage": "Indicates the expanded state of the prompt expander content."
                },
                {
                    "Selector": "`.k-prompt-expander .k-prompt-expander-content`",
                    "Attribute": "`role=list`",
                    "Usage": "Indicates that the suggestion container element is a list."
                },
                {
                    "Selector": "`.k-prompt-expander .k-prompt-suggestion`",
                    "Attribute": "`role=listitem`",
                    "Usage": "Indicates that the suggestion element is a listitem."
                },
                {
                    "Selector": "",
                    "Attribute": "`tabindex=0/-1`",
                    "Usage": "The element should be focusable."
                }
            ]
        }
    },
    {
        "h4": "Toolbar Component"
    },
    {
        "link": {
            "title": "ToolBar accessibility specification",
            "source": "{{toolbar_a11y_link}}"
        }
    },
    {
        "h4": "Card List Container"
    },
    {
        "link": {
            "title": "CardList accessibility specification",
            "source": "{{cardlist_a11y_link}}"
        }
    },
    {
        "h4": "Card Component"
    },
    {
        "link": {
            "title": "Card accessibility specification",
            "source": "{{card_a11y_link}}"
        }
    },
    {
        "h4": "More Actions View - PanelBar Component"
    },
    {
        "link": {
            "title": "PanelBar accessibility specification",
            "source": "{{panelbar_a11y_link}}"
        }
    },
    {
        "h3": "Keyboard Shortcuts"
    },
    {
        "p": "This section lists the keyboard shortcuts supported by the AI Prompt composite component."
    },
    {
        "h4": "Prompt Suggestion Component"
    },
    {
        "p": "The expand header button and the suggestion list elements are included in the tab sequence."
    },
    {
        "table": {
            "headers": [
                "Shortcut",
                "Behavior"
            ],
            "rows": [
                {
                    "Shortcut": "`Tab`",
                    "Behavior": "Moves focus to the next focusable element. If pressed on the expand button, expand content list gets focused."
                },
                {
                    "Shortcut": "`Shift+Tab`",
                    "Behavior": "Moves focus to the next focusable element. If pressed on the expand content list, the expand button gets focused."
                },
                {
                    "Shortcut": "`Down Arrow` & `Up Arrow`",
                    "Behavior": "Only applicable for the expand content list. The arrow keys are used to navigate through the list items."
                },
                {
                    "Shortcut": "`Home`",
                    "Behavior": "Only applicable for the expand content list. Focuses the first item."
                },
                {
                    "Shortcut": "`End`",
                    "Behavior": "Only applicable for the expand content list. Focuses the last item."
                },
                {
                    "Shortcut": "`Enter`",
                    "Behavior": "Selects the suggestion."
                }
            ]
        }
    },
    {
        "h4": "Toolbar Component"
    },
    {
        "link": {
            "title": "ToolBar  specification",
            "source": "{{toolbar_kb_link}}"
        }
    },
    {
        "h4": "Card List Container"
    },
    {
        "link": {
            "title": "CardList  specification",
            "source": "{{cardlist_kb_link}}"
        }
    },
    {
        "h4": "Card Component"
    },
    {
        "link": {
            "title": "Card  specification",
            "source": "{{card_kb_link}}"
        }
    },
    {
        "h4": "More Actions View - PanelBar Component"
    },
    {
        "link": {
            "title": "PanelBar  specification",
            "source": "{{panelbar_kb_link}}"
        }
    },
    {
        "h3": "Testing"
    },
    {
        "p": "The AI Prompt has been extensively tested automatically with [axe-core](https://github.com/dequelabs/axe-core) and manually with the most popular screen readers."
    },
    {
        "h3": "Screen Readers"
    },
    {
        "p": "The AI Prompt has been tested with the following screen readers and browsers combinations:"
    },
    {
        "table": {
            "headers": [
                "Environment",
                "Tool"
            ],
            "rows": [
                [
                    "Firefox",
                    "NVDA"
                ],
                [
                    "Chrome",
                    "JAWS"
                ],
                [
                    "Microsoft Edge",
                    "JAWS"
                ]
            ]
        }
    }
]